<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位课后练习</title>
    <style>
        .father {
            background-color: bisque;
            width: 1000px;
            height: 600px;
            margin: auto;
            position: relative;
            top: 40px;
        }
        
        .A {
            left: 200px;
            top: 100px;
            position: relative;
            z-index: 1;
        }
        
        .D {
            widows: 350px;
            height: 250px;
            background-color: darksalmon;
            position: absolute;
            left: 250px;
            top: 405px;
            z-index: 1;
            box-shadow: 3px 3px 20px 4px #3b3b3b;
        }
        
        .D h3 {
            color: darksalmon;
        }
        
        .E {
            position: absolute;
            top: 30px;
            left: 30px;
            width: 430px;
            height: 70ox;
            background-color: pink;
        }
        
        .E a {
            border: 2px solid rgb(238, 237, 232);
            display: liline-block;
            color: rgb(243, 242, 236);
            text-align: center;
        }
        
        .B {
            background-color: indigo;
            width: 430px;
            height: 590px;
            position: absolute;
            display: inline-block;
            right: 50px;
            top: -20px;
            box-shadow: 3px 3px 20px 4px indigo;
        }
        
        .C {
            width: 200px;
            position: absolute;
            top: 110px;
            left: 80px;
        }
        
        .B h3 {
            color: lightcyan;
        }
        
        .B p {
            color: lightcyan;
        }
        
        .B a {
            background-color: lightcyan;
            color: magenta;
            width: 150px;
            height: 30px;
            text-decoration: none;
            text-align: center;
        }
    </style>

</head>

<body>
    <div class="father">
        <div class="A">
            <IMG src="https://via.placeholder.com/350X350" alt="">
        </div>
        <div class="B">
            <div class="C">
                <h3>Philosphy</h3>
                <p>kklkld safdjka;lf lsdaff sla;f'sd;v ;sfa';f;;fioeifu klkld;vgdalf kfdafk skadskpofv sajkf dsfffer dasjklf jsrfdhfs asuryuaef asdrfjfgo dsaftf jeadiug</p>
                <a href="#">LEARN MORE</a>
            </div>
        </div>
        <div class="D">
            <div class="E">
                <h3>Experlance</h3>
                <p>Aifdhfg fhreuu dsfdhgfu dsfgkjldhdg difgii fdsjgj fgdhjgh dsgdjhbg jdsghub jdghd jdfgbjhbj fhddsjug sjdgf jsdghb djgh jdgjhb udeubh udeubh</p>
                <a>VIEW PORTFOLIO</a>
            </div>
        </div>


</body>

</html>